﻿@page "/components/inputadornment"
<LayoutContent AnchorItems="@(new[]{"文本装饰","任意装饰","API"})">
<PageHeader Title="InputAdornment 输入装饰器">
    用于装饰输入类组件的装饰器
</PageHeader>

<Example Title="文本装饰">
    <Description>在输入框前后加入一些特定的纯展示标签，通常在需要提高辨识效率时使用。</Description>
    <RunContent>
        <TSpace Vertical>
            <TSpaceItem>
                <TInputAdornment Prepend="http://">
                    <TInputText @bind-Value="Text"/>
                </TInputAdornment>
            </TSpaceItem>
            <TSpaceItem>
                <TInputAdornment Append=".com">
                    <TInputText @bind-Value="Text" />
                </TInputAdornment>
            </TSpaceItem>

            <TSpaceItem>
                <TInputAdornment Prepend="http://" Append=".com">
                    <TInputText @bind-Value="Text" />
                </TInputAdornment>
            </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TInputAdornment Prepend=""http://"">
    <TInputText @bind-Value=""Text""/>
</TInputAdornment>

<TInputAdornment Append="".com"">
    <TInputText @bind-Value=""Text"" />
</TInputAdornment>

<TInputAdornment Prepend=""http://"" Append="".com"">
    <TInputText @bind-Value=""Text"" />
</TInputAdornment>
```
")
    </CodeContent>
</Example>
<Example Title="任意装饰">
    <Description>
        使用 <code>PrependContent</code> 和 <code>AppendContent</code> 支持任意代码片段，但必须显示地设置 <code>ChildContent</code> 参数
    </Description>
    <RunContent>
        <TSpace Vertical>
            <TSpaceItem>
                <TInputAdornment>
                    <PrependContent>
                        <TIcon Name="IconName.LockOn"/>
                    </PrependContent>
                    <ChildContent>
                        <TInputText @bind-Value="Text" />
                    </ChildContent>
                </TInputAdornment>
            </TSpaceItem>
            <TSpaceItem>
                <TInputAdornment Append=".com">
                    <AppendContent>
                        <TIcon Name="IconName.Search" />
                    </AppendContent>
                    <ChildContent>
                        <TInputText @bind-Value="Text" />
                    </ChildContent>
                </TInputAdornment>
            </TSpaceItem>

            <TSpaceItem>
                <TInputAdornment>
                    <PrependContent>
                        <TIcon Name="IconName.LockOn" />
                    </PrependContent>
                    <ChildContent>
                        <TInputText @bind-Value="Text" />
                    </ChildContent>
                    <AppendContent>
                        <TIcon Name="IconName.Search" />
                    </AppendContent>
                </TInputAdornment>
            </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TInputAdornment>
    <PrependContent>
        <TIcon Name=""IconName.LockOn""/>
    </PrependContent>
    <ChildContent>
        <TInputText @bind-Value=""Text"" />
    </ChildContent>
</TInputAdornment>

<TInputAdornment Append="".com"">
    <AppendContent>
        <TIcon Name=""IconName.Search"" />
    </AppendContent>
    <ChildContent>
        <TInputText @bind-Value=""Text"" />
    </ChildContent>
</TInputAdornment>

<TInputAdornment>
    <PrependContent>
        <TIcon Name=""IconName.LockOn"" />
    </PrependContent>
    <ChildContent>
        <TInputText @bind-Value=""Text"" />
    </ChildContent>
    <AppendContent>
        <TIcon Name=""IconName.Search"" />
    </AppendContent>
</TInputAdornment>
```
")
    </CodeContent>
    </Example><div id="API"></div>
<ComponentAPI Component="typeof(TInputAdornment)"></ComponentAPI>
@code{
    string Text{ get; set; }
}
</LayoutContent>